<template>
  <div style="height:540px">
    <div class="fontWeight biaoti">企业佣金统计</div>
    <div class="flex flex-start flex-wrap mt20 mb55">
      <el-select style="width:200px" v-model="companyAdminId" class="mr10 mb20" placeholder="请选择客户企业" clearable filterable>
        <el-option
          v-for="dict in clientEnterpriseOptions"
          :key="dict.id"
          :label="dict.companyName"
          :value="dict.id"
        />
      </el-select>
      <el-select style="width:200px" v-model="companyAdminId" class="mr10 mb20" placeholder="请选择客户企业" clearable filterable>
        <el-option
          v-for="dict in clientEnterpriseOptions"
          :key="dict.id"
          :label="dict.companyName"
          :value="dict.id"
        />
      </el-select>
      <el-date-picker
      style="width:150px"
      v-model="value1"
      type="date"
      placeholder="开始日期"
      :picker-options="pickerOptions"
      >
      </el-date-picker>
      <span style="padding:7px 5px">-</span>
      <el-date-picker
      style="width:150px"
      v-model="value2"
      type="date"
      placeholder="结束日期"
      :picker-options="pickerOptions"
      >
      </el-date-picker>
    </div>
  <!-- <div :class="className" :style="{height:height,width:width}" /> -->
    <div class="flex flex-start flex-wrap flex-direction" style="position: relative;left: -130px;">
      <div style="height:170px;width:100%" id="myChart_sucess"></div>
      <div style="height:170px;width:100%;" id="myChart_fail"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  // props: {
  //   className: {
  //     type: String,
  //     default: 'chart'
  //   },
  //   width: {
  //     type: String,
  //     default: '100%'
  //   },
  //   height: {
  //     type: String,
  //     default: '100px'
  //   }
  // },
  data() {
    return {
      chart: null,
      chart1: null,
      pickerOptions: {
            disabledDate(time) {
                let curDate = (new Date()).getTime();
                let twelve = 365 * 24 * 3600 * 1000;
                let twelveMonths = curDate - twelve;
                return time.getTime() > Date.now() || time.getTime() < twelveMonths;
            }
      },
      value1: '',
      value2: '',
      clientEnterpriseOptions: [], // 所有客户企业下拉列表信息数据字典数据
      companyAdminId: undefined,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null

    if (!this.chart1) {
      return
    }
    this.chart1.dispose()
    this.chart1 = null
  },
  created() {
    this.getClientEnterprise().then(response => {
      this.clientEnterpriseOptions = response.data;
    });
  },
  methods: {
    initChart() {
      //this.chart = echarts.init(this.$el, 'macarons')
      this.chart = echarts.init(document.getElementById('myChart_sucess'), 'macarons')
      this.chart.setOption({
        title: {
          left: 'center',
          text: '总金额',
          top: '43%',
          textStyle: {
              color: '#333',
              fontSize: '14'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '30%',
          left: 'right',
          icon:'none',
          itemGap: 20, // 设置间距
          selectedMode:false,
          textStyle: {
            color: "#333",
            fontSize:'18'
         },
         formatter: function (name) {
              var index = 0;
              var labels = ['成功', '失败'];
              var counts = [50000,10000];
              labels.forEach(function (value, i) {
                  if (value == name) {
                      index = i;
                  }
              });
              return name + "\n\n" + counts[index] ;
           },
        },
        series: [
            {
                name: '总金额',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                      normal: {
                          color: function(params) {
                              var colorList = ['#045aff','#a2cdff'];
                              return colorList[params.dataIndex]
                          }
                      }
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false,
                    }
                },
               
                data: [
                    {value: 50000, name: '成功'},
                    {value: 10000, name: '失败'},
                
                ],
                animationEasing: 'cubicInOut',
                animationDuration: 2600
            }
          ]
      })



      this.chart1 = echarts.init(document.getElementById('myChart_fail'), 'macarons')
      this.chart1.setOption({
        title: {
          left: 'center',
          text: '总笔数',
          top: '43%',
          textStyle: {
              color: '#333',
              fontSize: '14'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '30%',
          left: 'right',
          icon:'none',
          itemGap: 20, // 设置间距
          selectedMode:false,
          textStyle: {
            color: "#333",
            fontSize:'18'
         },
         formatter: function (name) {
              var index = 0;
              var labels = ['成功', '失败'];
              var counts = [50000,10000];
              labels.forEach(function (value, i) {
                  if (value == name) {
                      index = i;
                  }
              });
              return name + "\n\n" + counts[index] ;
           },
        },
        series: [
            {
                name: '总笔数',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                      normal: {
                          color: function(params) {
                              var colorList = ['#ee2750','#ff94aa'];
                              return colorList[params.dataIndex]
                          }
                      }
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false
                    }
                },
               
                data: [
                    {value: 50000, name: '成功'},
                    {value: 10000, name: '失败'},
                
                ],
                animationEasing: 'cubicInOut',
                animationDuration: 2600
            }
          ]
      })
    }
  }
}
</script>
